
import React, { Component } from 'react'
import { BackAndroid, StatusBar, NavigationExperimental } from 'react-native'
import { connect } from 'react-redux'
import { Drawer } from 'native-base'
import { actions } from 'react-native-navigation-redux-helpers'

import { closeDrawer } from './redux/actions/drawer'
import SplashPage from './components/splashScreen'
import SideBar from './containers/sideBar'
import Login from './containers/login'
import Home from './containers/home'
import Person from './containers/person'
import Account from './containers/account'
import { statusBarColor } from './themes/base-theme'

const {
  popRoute,
} = actions

const {
  CardStack: NavigationCardStack,
} = NavigationExperimental

class AppNavigator extends Component {

  static propTypes = {
    drawerState: React.PropTypes.string,
    // popRoute: React.PropTypes.func,
    closeDrawer: React.PropTypes.func,
    navigation: React.PropTypes.shape({
      key: React.PropTypes.string,
      routes: React.PropTypes.array,
    }),
  }

  constructor(props) {
    super(props)
    this.state = {
      isSplash: true
    }
  }

  splashLoad () {
    this.setState({isSplash: false})
  }

  // componentDidMount() {
  //   BackAndroid.addEventListener('hardwareBackPress', () => {
  //     const routes = this.props.navigation.routes;
  //
  //     const preRouteKey = routes[routes.length - 1].key
  //     if ( preRouteKey === 'home' || preRouteKey === 'login') {
  //       return false;
  //     }
  //
  //     this.props.popRoute(this.props.navigation.key);
  //     return true;
  //   })
  // }

  componentDidUpdate() {
    if (this.props.drawerState === 'opened') {
      this.openDrawer()
    }

    if (this.props.drawerState === 'closed') {
      this._drawer.close()
    }
  }

  // popRoute() {
  //   this.props.popRoute();
  // }
  //
  openDrawer() {
    this._drawer.open();
  }

  closeDrawer() {
    if (this.props.drawerState === 'opened') {
      this.props.closeDrawer();
    }
  }

  _renderScene(props) { // eslint-disable-line class-methods-use-this
    switch (props.scene.route.key) {
      case 'login':
        return <Login/>
      case 'home':
        return <Home/>
      case 'person':
        return <Person/>
      case 'account':
        return <Account/>
      // case 'blankPage':
      //   return <BlankPage />;
      default :
        console.error('无效的route key');
        // return <Login />;
    }
  }

  render() {
    if (this.state.isSplash) {
      return (<SplashPage splashLoad={this.splashLoad.bind(this)}/>)
    }
    return (
      <Drawer
        ref={(ref) => { this._drawer = ref; }}
        type="overlay"
        tweenDuration={150} // 菜单弹出动画持续时间
        content={<SideBar />}
        tapToClose
        acceptPan={false} // 禁止滑动弹出菜单
        onClose={() => this.closeDrawer()} // 改变this.props.drawerState的值
        openDrawerOffset={0.2}
        panCloseMask={0.2}
        styles={{
          drawer: {
            shadowColor: '#000000',
            shadowOpacity: 0.8,
            shadowRadius: 3,
          },
        }}
        tweenHandler={(ratio) => {  //eslint-disable-line
          return {
            drawer: { shadowRadius: ratio < 0.2 ? ratio * 5 * 5 : 5 },
            main: {
              opacity: (2 - ratio) / 2,
            },
          };
        }}
        negotiatePan
      >
        <StatusBar
          backgroundColor={statusBarColor}
          barStyle="default"
        />
        <NavigationCardStack
          navigationState={this.props.navigation}
          //renderOverlay={this._renderOverlay}
          renderScene={this._renderScene}
        />
      </Drawer>
    );
  }
}

// function bindAction(dispatch) {
//   return {
//     closeDrawer: () => dispatch(closeDrawer()),
//     popRoute: key => dispatch(popRoute(key)),
//   };
// }

const bindAction = (dispatch) => ({
  closeDrawer: () => dispatch(closeDrawer()),
})

const mapStateToProps = (state) => ({
  drawerState: state.drawer.drawerState,
  navigation: state.cardNavigation,
})
//
export default connect(mapStateToProps, bindAction)(AppNavigator)
